<template>
	<view class="bar-outbox" :class="{'bg-transprant':opacity}">
		<view class="placeholder" v-if="displayPlaceHolder" :class="{'bg-transprant':opacity}" :style="{'height':currentEnv=='h5OrApp'?'102rpx':`${capsuleBottom+menuTopToBar}px`}">
		</view>
		<view class="custom-navbarbox-bottom" :class="{'bg-transprant':opacity}"
			:style="{'padding-top':`${statusBarHeight}px`,'padding-right':`${leftToRightBian}px` }">
			<view class="title-box"
				:style="{'padding-top':currentEnv=='h5OrApp'?'19rpx':`${menuTopToBar}px`,'padding-bottom':currentEnv=='h5OrApp'?'19rpx':`${menuTopToBar}px`}">
				<view class="middle" :style="{'width':`calc(100vw - ${leftToRightBian}px)`,height:`${capsuleHeight}px`}">
					<slot name="default"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {defineProps} from "vue";
	import {storeToRefs} from 'pinia';
	import {useSystemStore} from "@/stores/system.js";
	const systemStore=useSystemStore();
	const props=defineProps({
		opacity: {
			type: Boolean,
			default: false
		},
		displayPlaceHolder:{
			type: Boolean,
			default: true
		}
	})
	const {currentEnv,statusBarHeight,leftToRightBian,menuTopToBar,capsuleBottom,capsuleHeight,capsuleWidth}=storeToRefs(systemStore);
	if(!capsuleWidth.value){
		systemStore.getSystemInfo()
	}
</script>

<style lang="scss" scoped>
	.bar-outbox {
		background: #fff;

		.placeholder {
			display: block;
			background: #F7F8FA;
			&.bg-transprant{
				background: transparent;
			}
		}

		&.bg-transprant {
			background: transparent;
		}
	}

	.custom-navbarbox-bottom {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		box-sizing: border-box;
		background: #000;
		border-bottom: 2rpx solid #000;

		//background:#fff;
		&.bg-transprant {
			background-color: transparent;
			border-bottom: 2rpx solid transparent;
		}

		.title-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-left: 23rpx;

			 
			.middle{
				flex: auto;
				
			}
			 
		}

		.search-box {
			flex: auto;
			padding-left: 38rpx;
		}
	}
</style>